<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{$title}</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">

    <link rel="stylesheet" href="__HOME__/css/weui.css">
    <link rel="stylesheet" href="__HOME__/css/jquery-weui.css">
    <link rel="stylesheet" href="__HOME__/css/style.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_689900_q7w1lloaqzg2e29.css">

    <script src="__HOME__/js/vue.js"></script>

    <style>
        .mycenter-top{background: #fff;overflow: hidden;line-height: 60px;padding:20px;}
        .mycenter-top img{border-radius: 50%;float: left;}
        .weui-grid{
            width: 45%;
            height: 100px;
            background: #d1d1d1;
            margin: 2% 3% 2% 2% ;
            border-radius: 5px;

        }
        .weui-grids:before {
            border-top: 0px solid #d9d9d9;
        }
    </style>
</head>
<body class="back1"  >
<div class="index-top-fix">
    <a href="{:url('/store/parent.article/article')}?shop_id={$shop_id}" class="iconfont icon-left- left"></a>
    <p class="title">{$title}</p>
</div>


<div class="weui-grids"  style="margin-top: 50px"  id="app">


    <div style="border-bottom:1px solid #f4f4f4;background: #ffffff;" class="gecolor"  v-for="(item,index) in items" id="detail_box">
        <div  onclick="detail(this)"  :data_id="item.id">
            <div style="color: black;">
                <div style="padding: 10px;position: relative;clear:both;overflow:hidden;">
                    <div style="font-size:16px;width:70%;float:left;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;">
                       {{item.title}}
                    </div>
                    <div style="color: gray;width:30%;float:right;text-align: right;">
                        <!--<span style=" ">{{item.create_time}}</span>-->
                        <!--<span style="margin-left: 45%;margin-right: 10px;" class="iconfont icon-liulan"></span>-->
                        <span class="click_rate" style="font-size: 0.7rem;">{{item.create_time}}</span>

                    </div>
                </div>
            </div>
        </div>

    </div>


    <div class="weui-loadmore" v-if="is_loading" style="padding-bottom:30px;height:20px;">
        <i class="weui-loading"></i>
        <span class="weui-loadmore__tips">正在加载</span>
    </div>

    <div class="weui-cells__title" v-if="is_none" style="text-align: center;margin-bottom: 20px">无更多数据</div>



</div>
</body>

<script src="__HOME__/js/jquery.min.js"></script>
<script src="__HOME__/js/jquery-weui.min.js"></script>
<script>
    //    以下为参考示例
    var app = new Vue({
        el: '#app',
        data: {
            //初始化
            items: [],
            is_loading: false,
            is_none: false,
            cur_page: 1,
            limit: 5,
        }
    });
    function detail(that) {
        var id = $(that).attr('data_id');
        console.log("qqqqq" + id);

        var s = "/store/parent.article/detail?id=" + id+"&shop_id="+'{$shop_id}';
        location.href = s;
//        var url = "{:url('/home/project/detail')}?id=" + id;
//        location.href = url;
    }

    //滚动加载更多
    $(function () {
        //进入加载页面
        loadlist();
    });

    $(".list").infinite().on('infinite', function () {
        console.log("加载")
        loadlist();
    });

    //ajax加载数据
    function loadlist() {

        if (!app.is_loading && app.is_none != true) {
            app.is_loading = true;

            var sort_id = '{$sort_id}';
            console.log(sort_id);
            $.post('/store/parent.article/artlist', {page: app.cur_page, limit: app.limit,sort_id:sort_id }, function (res) {
                console.log(res);
                app.is_loading = false;
                if (res.count > 0) {
                    $('.workerLst').show();
                    app.cur_page++;
                    for (var index in res.data) {
                        app.items.push(res.data[index]);
                    }
                } else {
                    app.is_none = true;
                }

            });
        }

    }
</script>

</html>

